<template>
  <div class="page_table_wrapper">
    <el-table
      ref="table"
      :data="tableData"
      :border="border"
      :stripe="stripe"
      :height="tableMaxHeight"
      header-cell-class-name="headername"
      cell-class-name="rowname"
      v-loading="loading"
      :row-class-name="rowClassName"
      style="width: 100%"
      element-loading-text="拼命加载数据中"
      element-loading-spinner="el-icon-loading"
    >
      <el-table-column
        v-if="showSelect"
        type="selection"
        align="center"
        header-align="center"
        width="55"
        show-overflow-tooltip
      ></el-table-column>
      <el-table-column
        v-if="showIndex"
        type="index"
        align="center"
        header-align="center"
        label="序号"
        width="80"
        show-overflow-tooltip
      ></el-table-column>
      <slot></slot>
      <div
        style="padding-top: 10px"
        slot="empty"
        v-if="data && data.length == 0 && !isOverTime"
      >
        <p>暂无数据</p>
      </div>
      <div slot="empty" v-else>
        <p>服务器未响应，请检查网络是否连接</p>
      </div>
    </el-table>
    <el-pagination
      ref="pagination"
      class="pagination"
      background
      v-if="showPagination"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :current-page="page"
      :page-size="pageSize"
      :page-count="pageNum"
      :pager-count="pagerCount"
      :layout="layout"
      :total="total"
    >
    </el-pagination>
  </div>
</template>

<script>
export default {
  name: "pageTable",
  data() {
    return {
      tableMaxHeight: 0,
      tipText: "暂无数据",
      spanArr: [], // 二维数组，用于存放单元格合并规则
      position: 0, // 用于存储相同项的开始index
      tableData: []
    };
  },
  props: {
    autoHeightFlag: {
      type: Boolean,
      default: true
    },
    winH: {
      type: Number
    },
    layout: {
      type: String,
      default: "total, prev, pager, next, sizes, jumper"
    },
    page: {
      type: Number,
      default: 0
    },
    pageSize: {
      type: Number,
      default: 10
    },
    total: {
      type: Number,
      default: 0
    },
    pageNum: {
      type: Number,
      default: 10
    },
    pagerCount: {
      type: Number,
      default: 7
    },
    border: {
      type: Boolean,
      default: false
    },
    stripe: {
      type: Boolean,
      default: false
    },
    showSelect: {
      // 是否显示勾选框
      type: Boolean,
      default: false
    },
    showIndex: {
      // 是否显示序号
      type: Boolean,
      default: false
    },
    data: {
      type: Array,
      default() {
        return [];
      }
    },
    editHeight: {
      // 调整高度
      type: Number
    },
    loading: {
      type: Boolean,
      default: false
    },
    // 判断后端是否请求超时或者接口损坏
    isOverTime: {
      type: Boolean,
      default: false
    },
    // 是否显示分页
    showPagination: {
      type: Boolean,
      default: true
    },
    rowClassName: {
      type: Function
    }
  },
  activated() {
    this.maxHeightUpdate();
  },
  mounted() {
    if (this.autoHeightFlag) {
      window.addEventListener("resize", this.maxHeightUpdate);
    }
    this.maxHeightUpdate();
  },
  watch: {
    data: {
      deep: true,
      immediate: true,
      handler() {
        this.tableData = this.data;
      }
    }
  },
  methods: {
    // 当前页码变化
    handleCurrentChange(page) {
      this.$emit("currentChange", page);
    },
    handleSizeChange(size) {
      this.$emit("sizeChange", size);
    },
    // 更新表格高度  使页面能同时看到表格和页码
    maxHeightUpdate() {
      this.$nextTick(() => {
        setTimeout(() => {
          // 如果有设置最大高度则使用 否则自己重新计算
          const editHeight = this.editHeight || 0;
          const winH = this.winH || window.innerHeight;
          const tableTop = this.$refs.table.$el.getBoundingClientRect().top;
          if (!this.autoHeightFlag) {
            this.tableMaxHeight = editHeight || 400;
          } else {
            this.tableMaxHeight = Math.max(
              winH - tableTop - (16 + 36 + 24 + 20),
              editHeight
            );
            // 总高度 - 表格顶部高度 - 表格下方必须高度
          }
        }, 20);
      });
    }
  },
  beforeDestroy() {
    window.removeEventListener("resize", this.maxHeightUpdate);
  }
};
</script>

<style lang="scss">
.page_table_wrapper {
  .pagination {
    margin-top: 16px;
    text-align: right;
  }
}
</style>
